import { Contact } from "./interface";
import { useState } from "react";

interface EditContactProps {
  initialData: Contact;
  onSave: (contact: Contact) => void;
}

function EditContact({ initialData, onSave }: EditContactProps) {
  const [name, setName] = useState(initialData.name);
  const [email, setEmail] = useState(initialData.email);

  return (
    <section>
      <label>
        名称：
        <input value={name} onChange={e => setName(e.target.value)} />
      </label>
      <label>
        邮箱：
        <input value={email} onChange={e => setEmail(e.target.value)} />
      </label>
      <br />
      <button
        onClick={() => {
          const updateData: Contact = {
            id: initialData.id,
            name,
            email
          };
          onSave(updateData);
        }}
      >
        保存
      </button>
      &nbsp;
      <button
        onClick={() => {
          setName(initialData.name);
          setEmail(initialData.email);
        }}
      >
        重置
      </button>
    </section>
  );
}

export default EditContact;
